<template>
<!-- 主容器 - 填充整个页面 -->
<div class="w-full min-h-screen" style="background-color: var(--content-bg-color)">
  
  <!-- 英雄区域 - 头部横幅 -->
  <div class="hero-section relative overflow-hidden">
    <!-- 背景图片 -->
    <div class="absolute inset-0 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-500">
      <div class="absolute inset-0 bg-black bg-opacity-30"></div>
    </div>
    
    <!-- 装饰性粒子效果 -->
    <div class="absolute inset-0 hero-particles"></div>
    
    <!-- 内容 -->
    <div class="relative z-10 max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 py-20 text-center">
      <h1 class="text-4xl md:text-6xl font-bold text-white mb-4 hero-title">
        阿杜博客
      </h1>
      <p class="text-xl md:text-2xl text-white text-opacity-90 mb-8">
        探索技术世界，分享编程智慧
      </p>
      <div class="flex justify-center space-x-4">
        <div class="px-4 py-2 bg-white bg-opacity-20 rounded-full text-white text-sm backdrop-blur-sm">
          <i class="mr-2">📚</i>技术分享
        </div>
        <div class="px-4 py-2 bg-white bg-opacity-20 rounded-full text-white text-sm backdrop-blur-sm">
          <i class="mr-2">💡</i>编程思考
        </div>
        <div class="px-4 py-2 bg-white bg-opacity-20 rounded-full text-white text-sm backdrop-blur-sm">
          <i class="mr-2">🚀</i>前端开发
        </div>
      </div>
    </div>
  </div>

  <!-- 内容区域 -->
  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
      
      <!-- 左侧主内容区域 -->
      <div class="lg:col-span-3">
          <!-- 文章列表 -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

  <div v-for="(article, index) in articles" :key="index"
      class="article-card bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden">
      <a @click="goArticleDetail(article.id)" class="cursor-pointer block">
          <img class="w-full h-48 object-cover" :src="article.titleImage" :alt="article.title" />
      </a>
      <div class="p-6">
          <!-- 标签 -->
          <div class="mb-4 flex flex-wrap gap-2">
              <span @click="goTagArticleListPage(item.id, item.name)" v-for="(item, index) in article.tags"
                  :key="index"
                  class="inline-block bg-green-100 text-green-800 text-xs font-medium px-3 py-1 rounded-full hover:bg-green-200 hover:text-green-900 cursor-pointer transition-colors duration-200 tag-item">
                  {{ item.name }}
              </span>
          </div>
          <a @click="goArticleDetail(article.id)" class="cursor-pointer">
              <h2 class="mb-3 text-xl font-bold tracking-tight text-gray-900 hover:text-blue-600 transition-colors duration-200 line-clamp-2 article-title">{{
                  article.title }}</h2>
          </a>
          <p class="mb-4 text-gray-600 line-clamp-3 article-description">{{ article.description }}</p>
          <!-- meta 信息 -->
          <div class="flex items-center text-sm text-gray-500 space-x-4 article-meta">
              <div class="flex items-center">
                  <svg class="w-4 h-4 mr-2" aria-hidden="true"
                  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M5 1v3m5-3v3m5-3v3M1 7h18M5 11h10M2 3h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" />
               </svg>
               {{ article.createTime }}
               </div>

               <div class="flex items-center">
                   <svg class="w-4 h-4 mr-2" aria-hidden="true"
                       xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
                       <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                           d="M1 5v11a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H1Zm0 0V2a1 1 0 0 1 1-1h5.443a1 1 0 0 1 .8.4l2.7 3.6H16a1 1 0 0 1 1 1v2H5" />
                   </svg>
                   <a @click="goCatagoryArticleListPage(article.category.id, article.category.name)"
                       class="hover:text-blue-600 cursor-pointer transition-colors duration-200 category-link">{{ article.category.name }}</a>
               </div>
           </div>
       </div>
   </div>
   </div>

   <!-- 优化后的分页 -->
   <nav aria-label="Page navigation" v-if="total > 0" class="mt-12 flex justify-center">
   <div class="pagination-wrapper bg-white rounded-2xl shadow-lg border border-gray-200 p-2">
     <ul class="flex items-center space-x-1">
       <!-- 上一页按钮 -->
       <li>
           <button v-if="current > 1" @click="getArticles(current - 1)"
               class="pagination-btn pagination-btn-nav">
               <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
               </svg>
           </button>
           <span v-else class="pagination-btn pagination-btn-disabled">
               <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
               </svg>
           </span>
       </li>
       
       <!-- 页码按钮 -->
       <li v-for="page in pages" :key="page">
           <button @click="getArticles(page)"
               class="pagination-btn"
               :class="page == current ? 'pagination-btn-active' : 'pagination-btn-normal'">
               {{ page }}
           </button>
       </li>
       
       <!-- 下一页按钮 -->
       <li>
           <button v-if="current < pages" @click="getArticles(current + 1)"
               class="pagination-btn pagination-btn-nav">
               <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
               </svg>
           </button>
           <span v-else class="pagination-btn pagination-btn-disabled">
               <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
               </svg>
           </span>
       </li>
     </ul>
   </div>
   </nav>
       </div>

       <!-- 右边栏 -->
       <div class="lg:col-span-1">
         <div class="sticky top-6 space-y-6">
           <!-- 用户信息卡片 -->
           <UserInfoCard></UserInfoCard>
           
           <!-- 分类区域 -->
           <div class="sidebar-card bg-white border border-gray-200 rounded-xl shadow-sm p-6">
             <h2 class="mb-4 text-lg font-bold text-gray-900 sidebar-title">分类</h2>
             <div class="space-y-2">
                 <a @click="goCatagoryArticleListPage(item.id, item.name)" v-for="(item, index) in categories"
                     :key="index"
                     class="sidebar-link flex items-center w-full px-4 py-3 text-sm font-medium text-gray-700 rounded-lg cursor-pointer hover:bg-gray-100 hover:text-blue-700 transition-colors duration-200 group">
                     <svg class="w-4 h-4 mr-3 text-gray-500 group-hover:text-blue-600" aria-hidden="true"
                         xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 18">
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                             stroke-width="1.5"
                             d="M2.539 17h12.476l4-9H5m-2.461 9a1 1 0 0 1-.914-1.406L5 8m-2.461 9H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.443a1 1 0 0 1 .8.4l2.7 3.6H16a1 1 0 0 1 1 1v2H5" />
                     </svg>
                     {{ item.name }}
                 </a>
             </div>
           </div>
           
           <!-- 标签区域 -->
           <div class="sidebar-card bg-white border border-gray-200 rounded-xl shadow-sm p-6">
             <h2 class="mb-4 text-lg font-bold text-gray-900 sidebar-title">标签</h2>
             <div class="flex flex-wrap gap-2">
                 <span @click="goTagArticleListPage(item.id, item.name)" v-for="(item, index) in tags" :key="index"
                     class="tag-item inline-block bg-green-100 text-green-800 text-sm font-medium px-3 py-1 rounded-full hover:bg-green-200 hover:text-green-900 cursor-pointer transition-colors duration-200">
                     {{ item.name }}
                 </span>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
</div>
</template>


<script setup lang="ts">
import UserInfoCard from '@/layouts/client/modules/UserInfoCard.vue';
import { getIndexArticles } from '@/service/api/frontend/index'
import { getCategories } from '@/service/api/frontend/category';
import { getTags } from '@/service/api/frontend/tag';
import { useRoute, useRouter } from 'vue-router';
import { reactive, ref } from 'vue'

const router = useRouter()

const goArticleDetail = (articleId: string | number) => {
    console.log('跳转详情页' + articleId)
    router.push({ path: '/client/home/article-detail', query: { articleId: articleId } })
}

const articles = ref([])
// 当前页码
const current = ref(1)
const total = ref(0)
const size = ref(10)
const pages = ref(0)

// 获取分页数据
async function getArticles(currentNo: number) {
   
    const res =  await getIndexArticles({ current: currentNo, size: size.value })

        console.log(res.data)

                articles.value = res.data.data
                current.value = res.data.current
                total.value = res.data.total
                size.value = res.data.size
                pages.value = res.data.pages

}
getArticles(current.value)

// 获取分类
const categories = ref([])
getCategories().then((e) => {
    console.log('获取分类数据')
    console.log(e)
    categories.value = e.data
})


// 获取标签
const tags = ref([])
getTags().then((e) => {
    console.log('获取标签数据')
    console.log(e)
    tags.value = e.data
})


const goCatagoryArticleListPage = (id: string | number, name: string) => {
    router.push({ path: '/client/category/category-article', query: { id: id, name: name } })
}

const goTagArticleListPage = (id: string | number, name: string) => {
    console.log('跳转 id' + id)
    router.push({ path: '/client/tags/tag-article', query: { id: id, name: name } })
}

</script>


<style scoped>
/* 移除默认的header-banner样式，因为我们已经在模板中处理了布局 */

/* 确保文本截断工作正常 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 改善卡片阴影效果 */
.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.hover\:shadow-lg:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* 暗模式下的阴影 */
.dark .shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}

.dark .hover\:shadow-lg:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

/* 确保图片响应式 */
img {
  max-width: 100%;
  height: auto;
}

/* 改善按钮和链接的交互效果 */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.transition-colors {
  transition-property: color, background-color, border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

/* 确保sticky定位在各浏览器中正常工作 */
.sticky {
  position: -webkit-sticky;
  position: sticky;
}

/* 响应式间距调整 */
@media (max-width: 1024px) {
  .lg\:col-span-3 {
    grid-column: span 1;
  }
  
  .lg\:col-span-1 {
    grid-column: span 1;
  }
  
  .sticky {
    position: relative;
    top: auto;
  }
}

@media (max-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
</style> 